<template>
  <div>
   <div class="mytype2">
      <div class="video">
      <span class="iconfont iconshipin"></span>
    </div>
    <div class="header">
      <div class="info">
        <img src="../assets/logo.jpg" alt />
        火星时报
      </div>
      <div class="focus">关注</div>
    </div>
    <div class="content">
      <p>美军与英军联合训练 6机编队阵容强大</p>
    </div>
   </div>
    <div class="good_share">
      <div>
        <span class="iconfont icondianzan"></span>
        112
      </div>
      <div>
        <span class="iconfont iconweixin" style="color:#02c802"></span>
        微信
      </div>
    </div>
    <div class="comment">
      <h3>精彩跟帖</h3>
      <!-- 第一条评论 -->
      <div class="item">
        <div class="user">
          <div class="info">
            <van-image round width="35px" height="35px" src="https://img.yzcdn.cn/vant/cat.jpeg" />
            <div class="name_time">
              <p>火星网友</p>
              <span>2小时前</span>
            </div>
          </div>
          <div class="reply">回复</div>
        </div>
        <p>文章说的很有道理!</p>
      </div>
      <!-- 第二条评论 -->
      <div class="item">
        <div class="user">
          <div class="info">
            <van-image round width="35px" height="35px" src="https://img.yzcdn.cn/vant/cat.jpeg" />
            <div class="name_time">
              <p>火星网友</p>
              <span>2小时前</span>
            </div>
          </div>
          <div class="reply">回复</div>
        </div>
        <!-- 评论框 -->
        <div class="boder">
          <div class="comments">
            <div class="ct">
              <div class="left">
                1
                <i>火星网友</i>
                <span>2小时前</span>
              </div>
              <div class="right">回复</div>
            </div>
            <div class="cf">
              <p>文章说的很有道理!</p>
            </div>
          </div>
          <div class="comments">
            <div class="ct">
              <div class="left">
                2
                <i>莫小滨</i>
                <span>2小时前</span>
              </div>
              <div class="right">回复</div>
            </div>
            <div class="cf">
              <p>+10086</p>
            </div>
          </div>
        </div>
        <p>三个字解决好吧</p>
      </div>
    </div>
    <div class="more">
      <p>更多跟帖</p>
    </div>
    <div class="nocomment">
      <p>暂无跟帖，抢占沙发</p>
    </div>
    <div class="footer">
      <div class="num">102</div>
      <div class="input">写跟帖</div>
      <span class="iconfont iconpinglun-"></span>
      <span class="iconfont iconshoucang"></span>
      <span class="iconfont iconfenxiang"></span>
    </div>
  </div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.item,.more{
  display: none !important;
}
.video {
  height: 50vw;
  background: pink;
  position: relative;
  span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 16.667vw;
    height: 16.667vw;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    text-align: center;
    line-height: 16.667vw;
    font-size: 13.889vw;
    color: #ffffff;
  }
}
.header {
  padding: 0 4.167vw;
  height: 13.889vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .info {
    display: flex;
    align-items: center;
    font-size: 3.889vw;
    color: #888;
    img {
      width: 8.333vw;
      height: 8.333vw;
      object-fit: cover;
      border-radius: 50%;
      margin-right: 1.111vw;
    }
  }
  .focus {
    background: red;
    padding: 1.389vw 2.778vw;
    border-radius: 4.167vw;
    font-size: 3.333vw;
    color: #fff;
  }
}
.content {
  // background: pink;
  padding: 1.389vw 4.167vw;
  p {
    margin-top: 2.778vw;
    font-size: 4.444vw;
    line-height: 6.944vw;
  }
}
.good_share {
  height: 19.444vw;

  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1.389vw solid #e4e4e4;
  div {
    height: 6.944vw;
    line-height: 6.944vw;
    // background-color: orange;
    padding: 0vw 2.778vw;
    border: 0.278vw solid #ccc;
    border-radius: 4.167vw;
    font-size: 3.889vw;
    margin: 0 auto;
    span {
      margin: 0 0.833vw;
    }
  }
}
.footer {
  display: flex;
  // background: pink;
  height: 11.111vw;
  align-items: center;
  padding: 0 2.778vw;
  position: relative;
  .input {
    flex: 1;
    background: #d7d7d7;
    margin-right: 8.333vw;
    padding-left: 4.167vw;
    height: 8.333vw;
    border-radius: 4.167vw;
    line-height: 8.333vw;
    color: #333;
    font-size: 3.889vw;
  }
  span {
    display: block;
    width: 11.111vw;
    font-size: 7.222vw;
    margin-right: 1.389vw;
    color: #595959;
  }
  .num {
    position: absolute;
    background: red;
    font-size: 3.333vw;
    color: #fff;
    padding: 0 1.667vw;
    height: 4.444vw;
    line-height: 4.444vw;
    text-align: center;
    border-radius: 2.222vw;
    right: 29.167vw;
    top: 0vw;
  }
}
.nocomment {
  height: 22.222vw;
  // background: pink;
  font-size: 3.889vw;
  color: #e4e4e4;
  line-height: 16.667vw;
  text-align: center;
  border-bottom: 0.278vw solid #eee;
  margin-bottom: 4.167vw;
}
//第一条评论
.comment {
  .item {
    border-bottom: 0.278vw solid #ccc;
    margin-bottom: 5.556vw;
  }
  h3 {
    font-weight: 300;
    text-align: center;
    margin: 8.333vw auto 5.556vw;
  }
  .user {
    padding: 0 4.167vw;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.778vw;
    .info {
      display: flex;
      .name_time {
        margin-left: 2.778vw;

        font-size: 3.889vw;
        line-height: 5vw;
        span {
          font-size: 3.333vw;
          color: #707070;
        }
      }
    }
    .reply {
      font-size: 3.333vw;
      color: #707070;
    }
  }
}
.comment .item > p {
  font-size: 3.889vw;
  padding: 4.167vw;
}
// 第二条评论

.comments {
  padding: 4.167vw;
  margin: 0 4.167vw;
  border-bottom: 0.278vw solid #ccc;
  border-left: 0.278vw solid #ccc;
  border-right: 0.278vw solid #ccc;
  &&:first-child {
    border-top: 0.278vw solid #ccc;
  }
  .ct {
    display: flex;
    justify-content: space-between;
    .left {
      font-size: 3.333vw;
      i {
        font-style: normal;
        font-size: 3.889vw;
        margin: 0 4.167vw 0 1.389vw;
      }
      span {
        // font-size: 3.333vw;
        color: #707070;
      }
    }
    .right {
      font-size: 3.333vw;
      color: #707070;
    }
  }
  .cf {
    padding-top: 4.167vw;
    font-size: 3.889vw;
  }
}
.more {
  height: 16.667vw;
  // background: pink;
  // text-align: center;
  display: flex;
  justify-content: center;
  p {
    border: 0.278vw solid #000;
    width: 27.778vw;
    height: 8.333vw;
    line-height: 8.333vw;
    border-radius: 4.167vw;
    font-size: 3.889vw;
    text-align: center;
  }
}
</style>